<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="./demo/css/index.css">
  <link rel="stylesheet" href="./demo/lib/mui/css/mui.min.css">
  <link rel="stylesheet" href="./demo/css/normalize.css">
  <script src="./mui/js/mui.fixed.js"></script>
  <script src="./mui/js/mui.js"></script>
  <script src="./demo/lib/jquery/jquery.min.js"></script>
  <script src="./demo/js/template.js"></script>
  <script src="./demo/js/index.js"></script>
  <script src="./demo/lib/flexible/index.js"></script>
  <style>
  </style>
</head>

<body>
  橘色的框
  <header class="mui-bar mui-bar-nav" id="map">
    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left">你好那个谁</a>
    <a><span class="mui-icon mui-icon-redo jintou " id="itt">登录</span></a>
  </header>


  <!-- 轮播图 -->
  <div id="slider" class="mui-slider map">
    <div class="mui-slider-group mui-slider-loop">
      <!-- 额外增加的一个节点(循环轮播：第一个节点是最后一张轮播) -->
      <div class="mui-slider-item mui-slider-item-duplicate">

      </div>
      <!-- 第一张 -->
      <div class="mui-slider-item">
        <a href="#" class="kuang ">
          <img src="../nav.png" style="  width: 1.2rem;
        height: 1.2rem;">
          玩的
        </a>
        <a href="#" class="kuang ">
          <img src="../nav.png" style="  width: 1.2rem;
        height: 1.2rem;">
          玩的
        </a>
        <a href="#" class="kuang ">
          <img src="../nav.png" style="  width: 1.2rem;
        height: 1.2rem;">
          玩的
        </a>
        <a href="#" class="kuang ">
          <img src="../nav.png" style="  width: 1.2rem;
        height: 1.2rem;">
          玩的
        </a>

        <a href="#" class="kuang ">
          <img src="../nav.png" style="  width: 1.2rem;
        height: 1.2rem;">
          玩的
        </a>
        <a href="#" class="kuang ">
          <img src="../nav.png" style="  width: 1.2rem;
        height: 1.2rem;">
          玩的
        </a>
        <a href="#" class="kuang ">
          <img src="../nav.png" style="  width: 1.2rem;
        height: 1.2rem;">
          玩的
        </a>
        <a href="#" class="kuang ">
          <img src="../nav.png" style="  width: 1.2rem;
        height: 1.2rem;">
          玩的
        </a>
        <a href="#" class="kuang ">
          <img src="../nav.png" style="  width: 1.2rem;
        height: 1.2rem;">
          玩的
        </a>
        <a href="#" class="kuang ">
          <img src="../nav.png" style="  width: 1.2rem;
        height: 1.2rem;">
          玩的
        </a>


      </div>
      <!-- 第三张 -->
      <div class="mui-slider-item">
        <a href="#" class="kuang ">
          <img src="../nav.png" style="  width: 1.2rem;
        height: 1.2rem;">
          玩的
        </a><a href="#" class="kuang ">
          <img src="../nav.png" style="  width: 1.2rem;
        height: 1.2rem;">
          玩的
        </a><a href="#" class="kuang ">
          <img src="../nav.png" style="  width: 1.2rem;
        height: 1.2rem;">
          玩的
        </a><a href="#" class="kuang ">
          <img src="../nav.png" style="  width: 1.2rem;
        height: 1.2rem;">
          玩的
        </a><a href="#" class="kuang ">
          <img src="../nav.png" style="  width: 1.2rem;
        height: 1.2rem;">
          玩的
        </a><a href="#" class="kuang ">
          <img src="../nav.png" style="  width: 1.2rem;
        height: 1.2rem;">
          玩的
        </a><a href="#" class="kuang ">
          <img src="../nav.png" style="  width: 1.2rem;
        height: 1.2rem;">
          玩的
        </a><a href="#" class="kuang ">
          <img src="../nav.png" style="  width: 1.2rem;
        height: 1.2rem;">
          玩的
        </a><a href="#" class="kuang ">
          <img src="../nav.png" style="  width: 1.2rem;
        height: 1.2rem;">
          玩的
        </a><a href="#" class="kuang ">
          <img src="../nav.png" style="  width: 1.2rem;
        height: 1.2rem;">
          玩的
        </a>
      </div>
      <!-- 第四张 -->
      <div class="mui-slider-item">
        <a href="#" class="kuang ">
          <img src="../nav.png" style="  width: 1.2rem;
        height: 1.2rem;">
          玩的
        </a><a href="#" class="kuang ">
          <img src="../nav.png" style="  width: 1.2rem;
        height: 1.2rem;">
          玩的
        </a><a href="#" class="kuang ">
          <img src="../nav.png" style="  width: 1.2rem;
        height: 1.2rem;">
          玩的
        </a><a href="#" class="kuang ">
          <img src="../nav.png" style="  width: 1.2rem;
        height: 1.2rem;">
          玩的
        </a><a href="#" class="kuang ">
          <img src="../nav.png" style="  width: 1.2rem;
        height: 1.2rem;">
          玩的
        </a><a href="#" class="kuang ">
          <img src="../nav.png" style="  width: 1.2rem;
        height: 1.2rem;">
          玩的
        </a><a href="#" class="kuang ">
          <img src="../nav.png" style="  width: 1.2rem;
        height: 1.2rem;">
          玩的
        </a><a href="#" class="kuang ">
          <img src="../nav.png" style="  width: 1.2rem;
        height: 1.2rem;">
          玩的
        </a><a href="#" class="kuang ">
          <img src="../nav.png" style="  width: 1.2rem;
        height: 1.2rem;">
          玩的
        </a><a href="#" class="kuang ">
          <img src="../nav.png" style="  width: 1.2rem;
        height: 1.2rem;">
          玩的
        </a>
      </div>
      <!-- 额外增加的一个节点(循环轮播：最后一个节点是第一张轮播) -->
      <div class="mui-slider-item mui-slider-item-duplicate">
        <a href="#">
          <img src="./demo/images/shuijiao.jpg">
        </a>
      </div>
    </div>
    <div class="mui-slider-indicator">
      <div class="mui-indicator mui-active"></div>
      <div class="mui-indicator"></div>
      <div class="mui-indicator"></div>
      <div class="mui-indicator"></div>
    </div>
  </div>
  

<!-- 猜你喜欢 -->
<div class="fond">

</div>

<script type="text/html " id="tpl_food">
      <div class="love">猜你喜欢</div>
      <ul id="goodsid" class="mui-table-view">
          {{each }}
          <li class="mui-table-view-cell mui-media">
              <a href="javascript:;">
                  <img class="mui-media-object mui-pull-left" src="{{'https:'+$value.img}}">
                  <div class="mui-media-body" id="cap">
                      {{$value.shop_name}}
                      <p class='mui-ellipsis'>{{$value.shop_name_sub}}</p>
                  </div>
                 <div id="price">
                  <span class="price1">¥{{$value.price_current}}</span>
                  <span class="price2">已售{{$value.sale_desc}}</span>
                 </div>
              </a>
          </li>
          {{/each}}
       
      </ul>     
  
</script>

<script>

  mui.init({
    swipeBack: true //启用右滑关闭功能
  });
  var slider = mui("#slider");
  slider.slider({
    interval: 2000
  }); 

</script>
</body>

</html>